<template>
  <div id="oilShow">
    <div
      class="bannerBox"
      v-for="(item, index) in list"
      :key="index"
      @click="toPage(item)"
    >
      <div class="topImg">
        <img :src="item.adPicture" alt="" />
        <img :src="item.adLabel" alt="" class="daikaifang" />
      </div>
      <div class="bottomBox">
        <p>{{ item.adDescribe }}</p>
        <div class="tagBox" v-if="item.adName">
          <div class="tag">{{ item.adName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import req from "@/utils/index";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      list: [],
      userMsg: {}
    };
  },
  methods: {
    toPage(item) {
      // console.log(item)
      if (item.adUrl == "") {
        Toast("暂未开放~");
        return
      }
      const vipGoodsNo = window.localStorage.getItem('VipGoodsNo')
      if (this.userMsg.userType == 0) {
        Dialog.confirm({
          message: "您的手机号还不是平台的会员， 是否要成为会员？",
        })
          .then(() => {
            // on confirm
            this.$router.push({
              name: "poster",
              query: {
                flag: 0
              },
            });
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      if (this.userMsg.userType == 1 && item.adUrl == vipGoodsNo) {
        Dialog.confirm({
          message: "您的手机号已经是平台的会员，但是暂未认证，是否前去认证领取更多权益？",
        })
          .then(() => {
            // on confirm
            this.$router.push({
              name: "upload"
            });
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      if (this.userMsg.userType == 2 && item.adUrl == vipGoodsNo) {
        Toast("您已经是尊贵的湖南中石油会员啦~");
        return;
      }
      this.$router.push({
        name: "creatOrder",
        query: {
          goodsNo: item.adUrl,
          didPay: "noYet"
        },
      });
    },
  },
  created() {
    req("get", "/qyHome/getZsyAd?adType=3", {}).then((res) => {
      if (res.rspCode == "000000") {
        console.log(res);
        // this.cateItems = res.data.list;
        // this.getShopList(res.data.list[0].id);
        this.list = res.data.list;
      }
    });
    this.userMsg = JSON.parse(window.localStorage.getItem('userMsg'))
  },
};
</script>

<style lang='scss' scoped>
#oilShow {
  padding: 3rem 0 3rem 0;
  background-color: #ac0101;
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/background/oilBG.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.bannerBox {
  width: 90%;
  margin: 1rem auto;
  background-color: #fff;
  padding: 0 0 0.3rem 0;
  border-radius: 0.15rem;
  .topImg {
    position: relative;
    width: 100%;
    img {
      width: 100%;
    }
    .daikaifang {
      position: absolute;
      left: -0.2rem;
      top: 0.2rem;
      width: 2rem;
    }
  }
  .bottomBox {
    p {
      margin: 0;
      padding: 0.3rem 0.1rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
      font-family: PingFangSC, PingFangSC-Regular;
    }
    .tagBox {
      padding: 0.1rem;
      .tag {
        display: inline-block;
        font-size: .2rem;
        padding: 0.1rem 0.3rem;
        color: #f58520;
        border: 1px solid #f58520;
        background: rgba(245, 133, 32, 0.1);
        border-radius: 0.4rem;
      }
    }
  }
}
</style>